<template>
  <div class="xingTransfer">
    <div class="xing-transfer-panel">
      <div class="top-box">
        <span class="title">{{titleTexts && titleTexts[0]}}</span>
        <span class="selected">{{leftSelection.length}}/{{leftTableList.length}}</span>
      </div>
      <div class="search-box" v-if="showQuery">
        <el-form ref="form" :model="leftForm" label-width="0px" @submit.native.prevent @keyup.enter.native="handleLeftSearch">
          <el-form-item label="">
            <el-input
              size="small"
              placeholder="请输入内容"
              v-model="leftForm.value">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-box">
        <el-table
          :row-key="row => row.name"
          @selection-change="handleLeftSelectionChange"
          size="mini"
          border
          ref="leftMultipleTable"
          :data="leftTableList"
          :max-height="maxHeight"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            :reserve-selection="true"
            align="center"
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="col in tableColumn"
            :prop="col.prop"
            :key="col.label"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <template v-if="showPagination">
          <div class='xing-pagination'>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="leftForm.page"
              :page-sizes="[1, 2,5, 10]"
              :page-size="leftForm.pageSize"
              small
              background
              layout="prev, pager, next"
              :total="leftForm.total">
            </el-pagination>
          </div>
        </template>
      </div>
    </div>
    <div class="xing-transfer-arrow">
      <el-button type="primary" icon="el-icon-d-arrow-left" :disabled="rightSelection.length ===0" @click="handleSelectToLeft">
        <span v-if="buttonTexts[0] !== undefined">{{buttonTexts[0]}}</span>
      </el-button>
      <el-button type="primary" icon="el-icon-d-arrow-right" :disabled="leftSelection.length ===0" @click="handelSelectToRight">
        <span v-if="buttonTexts[1] !== undefined">{{buttonTexts[1]}}</span>
      </el-button>
    </div>
    <div class="xing-transfer-panel">
      <div class="top-box">
        <span class="title">{{titleTexts && titleTexts[1]}}</span>
        <span class="selected">{{rightSelection.length}}/{{rightTableList.length}}</span>
      </div>
      <div class="search-box" v-if="showQuery">
        <el-form ref="form" :model="rightForm" label-width="0px" @submit.native.prevent @keyup.enter.native="handleRightSearch">
          <el-form-item label="">
            <el-input
              size="small"
              placeholder="请输入内容"
              v-model="rightForm.value">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-box">
        <el-table
          :row-key="(row) => row.name"
          @selection-change="handleRightSelectionChange"
          size="mini"
          border
          ref="rightMultipleTable"
          :data="rightTableList"
          :max-height="maxHeight"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            :reserve-selection="true"
            align="center"
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="col in tableColumn"
            :key="col.label"
            :prop="col.prop"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <template v-if="showPagination">
          <div class='xing-pagination'>
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="rightForm.page"
              :page-sizes="[1, 2,5, 10]"
              :page-size="rightForm.pageSize"
              small
              background
              layout="prev, pager, next"
              :total="rightForm.total">
            </el-pagination>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XingTableTransfer',
  props: {
    // 标题文本
    titleTexts: {
      type: Array,
      default () {
        return ['待选项', '已选项']
      }
    },
    // 查询按钮文本
    buttonTexts: {
      type: Array,
      default () {
        return []
      }
    },
    // 显示条件查询
    showQuery: {
      type: Boolean,
      default: true
    },
    // 显示分页
    showPagination: {
      type: Boolean,
      default: false
    },
    // table 列数据
    tableColumn: {
      type: Array,
      default () {
        return []
      }
    },
    getOriginLeftTableList: {
      type: Array,
      default () {
        return []
      }
    },
    getOriginRightTableList: {
      type: Array,
      default () {
        return []
      }
    },
    maxHeight: {
      type: String,
      default: '350px'
    }
  },
  data () {
    return {
      value: '',
      originLeftTableList: this.getOriginLeftTableList,
      originRightTableList: this.getOriginRightTableList,
      leftSelection: [], // 左边选中数据
      rightSelection: [], // 右边选中数据
      rightTableList: [], // 右侧列表
      leftTableList: [],
      leftForm: {
        value: '',
        page: 1,
        pageSize: 5,
        total: 0
      },
      rightForm: {
        value: '',
        page: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  created () {
    this.leftTableList = this.originLeftTableList
    this.getLeftList()
    this.rightTableList = this.originRightTableList
    this.getRightList()
  },
  computed: {},
  methods: {
    // 处理数据
    getLeftList () {
      let list = this.originLeftTableList.filter((item, index) =>
        item.name.includes(this.leftForm.value.trim())
      )
      console.log(list)
      // 判断是否分页
      if (this.showPagination) {
        this.leftTableList = list.filter((item, index) =>
          index < this.leftForm.page * this.leftForm.pageSize && index >= this.leftForm.pageSize * (this.leftForm.page - 1)
        )
      } else {
        this.leftTableList = list
      }
      this.leftForm.total = list.length
    },
    // 当每页数量改变
    handleSizeChange (val) {
      this.leftForm.pageSize = val
      this.getLeftList()
    },
    // 当前页改变
    handleCurrentChange (val) {
      this.leftForm.page = val
      this.getLeftList()
    },
    // 搜索过滤数据
    handleLeftSearch () {
      this.leftForm.page = 1
      this.getLeftList()
    },
    // 左侧选中
    handleLeftSelectionChange (selection) {
      console.log(selection)
      this.leftSelection = selection
    },
    // 右侧选中
    handleRightSelectionChange (selection) {
      this.rightSelection = selection
    },
    // 到右侧
    handelSelectToRight () {
      this.originRightTableList = this.handleConcatArr(this.originRightTableList, this.leftSelection)
      this.getRightList()
      // 处理左侧数据
      this.handleRemoveTabList(this.leftSelection, this.leftTableList)
      this.handleRemoveTabList(this.leftSelection, this.originLeftTableList) // 清除元数据
      this.$refs.leftMultipleTable.clearSelection() // 清除左侧选中，防止累计
      this.toggleSelection('rightMultipleTable', this.rightSelection, true) // 保存之前选中的数据状态
      this.leftSelection = []
      this.leftForm.page = 1
      this.getLeftList()
      // console.log(this.leftSelection)
    },
    // 处理数据
    getRightList () {
      let list = this.originRightTableList.filter((item, index) =>
        item.name.includes(this.rightForm.value.trim())
      )
      this.rightTableList = list.filter((item, index) =>
        index < this.rightForm.page * this.rightForm.pageSize && index >= this.rightForm.pageSize * (this.rightForm.page - 1)
      )
      this.rightForm.total = list.length
    },
    // 当每页数量改变
    handleSizeChange1 (val) {
      this.rightForm.pageSize = val
      this.getRightList()
    },
    // 当前页改变
    handleCurrentChange1 (val) {
      this.rightForm.page = val
      this.getRightList()
    },
    // 搜索过滤数据
    handleRightSearch () {
      this.rightForm.page = 1
      this.getRightList()
    },
    // 到左侧
    handleSelectToLeft () {
      this.originLeftTableList = this.handleConcatArr(this.originLeftTableList, this.rightSelection)
      this.getLeftList()
      // 处理左侧数据
      this.handleRemoveTabList(this.rightSelection, this.rightTableList)
      this.handleRemoveTabList(this.rightSelection, this.originRightTableList) // 清除元数据
      this.$refs.rightMultipleTable.clearSelection() // 清除左侧选中，防止累计
      this.toggleSelection('leftMultipleTable', this.leftSelection, true)
      this.rightSelection = []
      this.rightForm.page = 1
      this.getRightList()
      console.log(this.rightSelection)
    },
    // 手动选中
    toggleSelection (name, rows) {
      rows.forEach((val, index, arr) => {
        this.$nextTick(() => {
          this.$refs[name].toggleRowSelection(arr[index], true)
        })
      })
    },
    // 拼接数组
    handleConcatArr (tableList, nowSelectData) {
      let arr = []
      arr = arr.concat(tableList, nowSelectData)
      return arr
    },
    // 数组删除
    handleRemoveTabList (isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]['date'] === originalArr[k]['date']) {
              originalArr.splice(k, 1)
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .xingTransfer {
    display: flex;
    flex-direction: row;
  }
  .xing-transfer-panel {
    display: inline-block;
    box-sizing: border-box;
    width: 380px;
    max-height: 100%;
    vertical-align: middle;
    overflow: hidden;
    /*position: relative;*/
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
    .top-box {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      height: 40px;
      margin: 0;
      padding: 0px 15px;
      line-height: 40px;
      background: #f5f7fa;
      border-bottom: 1px solid #ebeef5;
      color: #000;
      .title {
        font-size: 16px;
        color: #303133;
        font-weight: 400;
      }
      .selected {
        color: #909399;
        font-size: 12px;
        font-weight: 400
      }
    }
    .search-box {
      display: block;
      width: auto;
      box-sizing: border-box;
      margin: 15px 15px 15px;
      text-align: center;
      /deep/ .el-input__inner {
        border-radius: 16px
      }
    }
    .content-box {
      /*height: 350px;*/
      width: 100%;
      box-sizing: border-box;
      padding: 0 5px;
      margin: 15px 0px;
      overflow-x: hidden;
      overflow-y: auto;
      /deep/ .el-table {
        overflow-x: hidden;
      }
      .xing-pagination {
        margin: 0px 0px 10px;
        text-align: right;
      }
    }
  }
  .xing-transfer-arrow {
    display: flex;
    width: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /deep/ .el-button {
      &:first-child {
        margin-bottom: 20px;
      }
      &:last-child {
        margin-left: 0px;
      }
    }
  }
</style>
